<!DOCTYPE HTML>
<html lang="en" ng-app="playgroundApp">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>macchina.io - Playground</title>
    <link rel="stylesheet" href="/css/macchina.css" type="text/css"/>
    <link rel="stylesheet" href="/css/font-awesome.min.css" type="text/css"/>
    <link rel="stylesheet" href="/macchina/playground/css/styles.css" type="text/css"/>
    <link rel="icon" href="/images/favicon.ico">
    <script type="text/javascript" src="/jquery/jquery.min.js"></script>
    <script type="text/javascript" src="/angular/angular.js"></script>
    <script type="text/javascript" src="/macchina/playground/js/app.js"></script>
    <script type="text/javascript" src="/macchina/playground/js/services.js"></script>
    <script type="text/javascript" src="/macchina/playground/js/controllers.js"></script>
    <script type="text/javascript" src="/ace/ace.js"></script>
  </head>
  <body ng-controller="SessionCtrl">
    <header>
      <div class="headercontainer">
        <div class="header">
          <h1>
          <a href="/"><img src="/images/headerlogo.png" srcset="/images/headerlogo-x2.png 2x" alt="macchina.io"></a>Playground
          </h1>
        </div>
      </div>
    </header>
    <div class="contentcontainer">
      <div class="content" ng-controller="PlaygroundCtrl">
        <nav>
          <div class="usernav">
            <div class="navigation">
              <ul>
                <li ng-show="true">
                  <i class="fa fa-upload"></i> <a ng-click="save()">Save</a>
                </li>
                <li ng-show="state == 'resolved'">
                  <i class="fa fa-play"></i> <a ng-click="run()">Run</a>
                </li>
                <li ng-show="state == 'active'">
                  <i class="fa fa-play-circle-o"></i> <a ng-click="restart()">Restart</a>
                </li>
                <li ng-show="state == 'active'">
                  <i class="fa fa-stop"></i> <a ng-click="stop()">Stop</a>
                </li>
                <li>
                  <i class="fa fa-cube"></i> <a ng-click="showExport()">Export Bundle</a>
                </li>
              </ul>
            </div>
            <div class="username">
              <i class="fa fa-user"></i>
              &nbsp;
              {{session.username}}
              &nbsp;
              <a id="logoutLink" href="#" onclick="document.logout.submit()">Sign out</a>
           </div>
           <form method="post" name="logout" action="/">
             <input type="hidden" name="action" value="logout">
           </form>
           <div style="clear: both;"></div>
         </div>
        </nav>
        <div class="error" ng-if="error != ''">
          {{error}}
        </div>
        <div class="groupbox">
          <pre id="editor"></pre>
        </div>
        <div id="modalBackground" class="modalBackground"></div>
        <div id="exportPopup" class="popupWindow">
          <h1>Export Bundle</h1>
          <form id="exportForm" name="exportForm" method="POST" action="/macchina/playground/export" novalidate>
            <table>
              <tr class="even">
                <th><label>Name</label></th>
                <td>
                  <input type="text" name="name" ng-model="bundle.name" size="32" maxlength="64" placeholder="My Bundle" required ng-minlength="3">
                  <span ng-show="exportForm.name.$invalid && !exportForm.name.$pristine"><i class="fa fa-exclamation-triangle"></i></span>
                </td>
              </tr>
              <tr class="odd">
                <th><label>Symbolic Name</label></th>
                <td>
                  <input type="text" name="symbolicName" ng-model="bundle.symbolicName" size="32" maxlength="64" placeholder="com.my-company.my-bundle" required ng-pattern="/^[a-z]+\.([a-zA-Z0-9-]+\.)+[a-zA-Z0-9-]+$/">
                  <span ng-show="exportForm.symbolicName.$invalid && !exportForm.symbolicName.$pristine"><i class="fa fa-exclamation-triangle"></i></span>
                </td>
              </tr>
              <tr class="even">
                <th><label>Version</label></th>
                <td>
                  <input type="text" name="version" ng-model="bundle.version" size="8" maxlength="8" placeholder="1.0.0" required ng-pattern="/^[0-9]+\.[0-9]+\.[0-9]+$/">
                  <span ng-show="exportForm.version.$invalid && !exportForm.version.$pristine"><i class="fa fa-exclamation-triangle"></i></span>
                </td>
              </tr>
              <tr class="odd">
                <th><label>Vendor</label></th>
                <td><input type="text" name="vendor" ng-model="bundle.vendor" size="32" maxlength="64" placeholder="My Company"></td>
              </tr>
              <tr class="even">
                <th><label>Copyright</label></th>
                <td><input type="text" name="copyright" ng-model="bundle.copyright" size="32" maxlength="64" placeholder="2015"></td>
              </tr>
                <td></td>
                <td style="text-align: right">
                  <a href="#" ng-click="hideExport()">Cancel</a>
                  &nbsp;
                  <button type="button" ng-disabled="exportForm.$invalid" ng-click="export()">Export</button>
                </td>
              <tr>
            </table>
          </form>
        </div>
      </div>
    </div>
  </body>
</html>

